/**
 * 用于popup的弹窗容器，可以配合ByPopup或PageContainer使用
 */

import { View } from "@tarojs/components";
import { ReactNode } from "react";
import ByRow from "../ui/ByRow";
import ByIcon from "../ui/ByIcon";

type PopupContainerProps = {
  title?: ReactNode;
  children?: ReactNode;

  safeFooter?: boolean;
};

export type PopupContainerEvent = {
  onCancel?: () => void;
};

export default ({
  title,
  children,
  safeFooter = true,
  onCancel,
}: PopupContainerProps & PopupContainerEvent) => {
  return (
    <View className="bg-white rounded-t-xl">
      <ByRow className="p-3">
        <View className="flex-auto text-lg">{title}</View>
        <ByIcon
          name="CloseCircle"
          className="ml-2"
          size={40}
          onClick={onCancel}
        />
      </ByRow>

      <View>{children}</View>
      {safeFooter && <View className="safe-footer" />}
    </View>
  );
};
